import React, { useState } from 'react'
import { Pagination } from 'antd';

export default function PageCom() {
  //声明一个状态
  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(4);
  return (
    <div>
      <h2>分页</h2>
      <Pagination
        current={current}
        total={20}
        pageSize={pageSize}
        onChange={(page, pageSize) => {
          // console.log(page, pageSize)
          //当分页的页码点击变化之后, 更新页码的状态
          setCurrent(page);
          //更新状态
          setPageSize(pageSize);
        }} 
        showSizeChanger={true}
        //设置每页显示数量的数字列表
        pageSizeOptions={[1,2,3,4]}
        />
    </div>
  )
}
